<template>
  <div class="invoice-manage">
    <van-field required v-model.trim="company" maxlength="30" label="公司名称" placeholder="请输入公司名称" />
    <van-field required v-model="taxpayerIdNum" maxlength="30" label="纳税人识别号" placeholder="请输入纳税人识别号" />
    <van-field required v-model="companyAddress" maxlength="50" label="公司地址" placeholder="请输入公司地址" />
    <van-field required v-model="bankName" label="开户银行" maxlength="20" placeholder="请输入开户银行" />
    <van-field required v-model="bankAccount" label="银行账号" maxlength="20" placeholder="请输入银行账号" />
    <van-field required type="tel" v-model="phone" label="联系电话" maxlength="11" placeholder="请输入联系电话" />
    <p class="title">营业执照</p>
    <div class="upload">
      <van-uploader v-model="imgList" :max-count="1" :after-read="afterRead" preview-size="60px" />
    </div>
    <van-button class="submit-btn" color="#FE9100" block @click="submit">提交</van-button>
  </div>
</template>

<script>
import { Field, Button, Uploader, Toast } from 'vant';
import { invoiceTitle_getInvoiceTitleDetail, invoiceTitle_saveInvoiceTitle } from '@api/user';
export default {
  components: {
    [Uploader.name]: Uploader,
    [Button.name]: Button,
    [Field.name]: Field
  },
  data() {
    return {
      id: this.$route.query.id ? this.$route.query.id : '',
      company: '',
      taxpayerIdNum: '',
      companyAddress: '',
      bankName: '',
      bankAccount: '',
      phone: '',
      imgList: []
    };
  },
  mounted() {
    this.getOSSConfig();
    if (this.id) {
      this.getInvoiceDetail();
    }
  },
  methods: {
    async getInvoiceDetail() {
      let res = await invoiceTitle_getInvoiceTitleDetail({ invoiceId: this.id });
      if (res.code === 200) {
        this.invoiceData = res.data;
        let { company, taxpayerIdNum, companyAddress, bankName, bankAccount, phone, licensePicture } = res.data;
        this.company = company;
        this.taxpayerIdNum = taxpayerIdNum;
        this.bankName = bankName;
        this.companyAddress = companyAddress;
        this.bankAccount = bankAccount;
        this.phone = phone;
        if (licensePicture) {
          this.imgList = [{ url: licensePicture, link: licensePicture }];
        }
      } else {
        Toast(res.msg);
      }
    },
    afterRead(file) {
      let OSS = require('ali-oss');
      let client = new OSS({
        region: 'oss-cn-beijing',
        accessKeyId: this.OSSConfig.accessKeyId,
        accessKeySecret: this.OSSConfig.accessKeySecret,
        stsToken: this.OSSConfig.securityToken,
        bucket: this.OSSConfig.bucket
      });
      client
        .put(`invoicetitle/userid_${this.userInfo.id}/${Date.now()}.png`, file.file)
        .then(res => {
          this.imgList[this.imgList.length - 1].link = res.url;
        })
        .catch(err => {});
    },
    async submit() {
      const { company, taxpayerIdNum, companyAddress, bankName, bankAccount, phone, imgList } = this;
      if (!company) {
        Toast('请填写公司名称');
      } else if (!taxpayerIdNum) {
        Toast('请填写纳税人识别号');
      } else if (!companyAddress) {
        Toast('请填写公司地址');
      } else if (!bankName) {
        Toast('请填写开户银行');
      } else if (!bankAccount) {
        Toast('请填写银行账号');
      } else if (!/^1[3456789]\d{9}$/.test(phone)) {
        Toast('请填写正确的联系电话');
      } else {
        const { id = '' } = this.$route.query;
        const licensePicture = imgList.length ? imgList[0].link : '';
        let res = await invoiceTitle_saveInvoiceTitle({ id, company, taxpayerIdNum, companyAddress, bankName, bankAccount, phone, licensePicture });
        Toast(res.msg);
        if (res.code === 200) {
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.van-cell {
  padding: 30px 32px;
}
.van-cell:after {
  right: 32px;
}
.title {
  line-height: 82px;
  margin-top: 10px;
  font-size: 26px;
  color: #818b9d;
  text-indent: 30px;
}
.upload {
  background: #fff;
  padding: 25px 0 25px 30px;
}
.submit-btn {
  width: calc(100% - 66px);
  margin: 70px auto 50px;
  font-size: 30px;
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 0px 12px 28px 1px rgba(254, 145, 0, 0.3);
}
</style>
